<template>
  <div class="hr-container">
    <h1>人力资源管理</h1>
    
    <div class="tabs">
      <button 
        :class="{ active: activeTab === 'employees' }" 
        @click="activeTab = 'employees'"
      >
        员工管理
      </button>
      <button 
        :class="{ active: activeTab === 'attendance' }" 
        @click="activeTab = 'attendance'"
      >
        考勤管理
      </button>
      <button 
        :class="{ active: activeTab === 'payroll' }" 
        @click="activeTab = 'payroll'"
      >
        薪资管理
      </button>
    </div>
    
    <!-- 员工管理 -->
    <div v-if="activeTab === 'employees'" class="tab-content">
      <div class="toolbar">
        <button @click="showAddEmployeeModal = true" class="btn-primary">
          新增员工
        </button>
      </div>
      
      <div class="table-container">
        <table>
          <thead>
            <tr>
              <th>员工编号</th>
              <th>姓名</th>
              <th>部门</th>
              <th>职位</th>
              <th>入职日期</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="employee in employees" :key="employee.id">
              <td>{{ employee.employee_no }}</td>
              <td>{{ employee.name }}</td>
              <td>{{ employee.department }}</td>
              <td>{{ employee.position }}</td>
              <td>{{ employee.hire_date }}</td>
              <td>{{ employee.status }}</td>
              <td>
                <button @click="editEmployee(employee)" class="btn-edit">编辑</button>
                <button @click="deleteEmployee(employee.id)" class="btn-delete">删除</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    
    <!-- 考勤管理 -->
    <div v-if="activeTab === 'attendance'" class="tab-content">
      <div class="toolbar">
        <button @click="showAddAttendanceModal = true" class="btn-primary">
          新增考勤记录
        </button>
      </div>
      
      <div class="table-container">
        <table>
          <thead>
            <tr>
              <th>员工编号</th>
              <th>员工姓名</th>
              <th>日期</th>
              <th>上班时间</th>
              <th>下班时间</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="record in attendanceRecords" :key="record.id">
              <td>{{ record.employee_no }}</td>
              <td>{{ getEmployeeName(record.employee_id) }}</td>
              <td>{{ record.date }}</td>
              <td>{{ record.clock_in }}</td>
              <td>{{ record.clock_out }}</td>
              <td>{{ record.status }}</td>
              <td>
                <button @click="editAttendance(record)" class="btn-edit">编辑</button>
                <button @click="deleteAttendance(record.id)" class="btn-delete">删除</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    
    <!-- 薪资管理 -->
    <div v-if="activeTab === 'payroll'" class="tab-content">
      <div class="toolbar">
        <button @click="showAddPayrollModal = true" class="btn-primary">
          新增薪资记录
        </button>
      </div>
      
      <div class="table-container">
        <table>
          <thead>
            <tr>
              <th>员工编号</th>
              <th>员工姓名</th>
              <th>月份</th>
              <th>基本工资</th>
              <th>绩效奖金</th>
              <th>扣除项</th>
              <th>实发工资</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="record in payrollRecords" :key="record.id">
              <td>{{ record.employee_no }}</td>
              <td>{{ getEmployeeName(record.employee_id) }}</td>
              <td>{{ record.month }}</td>
              <td>{{ record.base_salary }}</td>
              <td>{{ record.bonus }}</td>
              <td>{{ record.deductions }}</td>
              <td>{{ record.net_salary }}</td>
              <td>{{ record.status }}</td>
              <td>
                <button @click="editPayroll(record)" class="btn-edit">编辑</button>
                <button @click="deletePayroll(record.id)" class="btn-delete">删除</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    
    <!-- 新增/编辑员工模态框 -->
    <div v-if="showAddEmployeeModal" class="modal">
      <div class="modal-content">
        <span class="close" @click="showAddEmployeeModal = false">&times;</span>
        <h2>{{ editingEmployee ? '编辑员工' : '新增员工' }}</h2>
        <form @submit.prevent="saveEmployee">
          <div class="form-group">
            <label>员工编号:</label>
            <input v-model="employeeForm.employee_no" type="text" required />
          </div>
          <div class="form-group">
            <label>姓名:</label>
            <input v-model="employeeForm.name" type="text" required />
          </div>
          <div class="form-group">
            <label>部门:</label>
            <input v-model="employeeForm.department" type="text" />
          </div>
          <div class="form-group">
            <label>职位:</label>
            <input v-model="employeeForm.position" type="text" />
          </div>
          <div class="form-group">
            <label>入职日期:</label>
            <input v-model="employeeForm.hire_date" type="date" required />
          </div>
          <div class="form-group">
            <label>状态:</label>
            <select v-model="employeeForm.status">
              <option value="ACTIVE">在职</option>
              <option value="INACTIVE">离职</option>
            </select>
          </div>
          <div class="form-actions">
            <button type="submit" class="btn-primary">保存</button>
            <button type="button" @click="showAddEmployeeModal = false">取消</button>
          </div>
        </form>
      </div>
    </div>
    
    <!-- 新增/编辑考勤记录模态框 -->
    <div v-if="showAddAttendanceModal" class="modal">
      <div class="modal-content">
        <span class="close" @click="showAddAttendanceModal = false">&times;</span>
        <h2>{{ editingAttendance ? '编辑考勤记录' : '新增考勤记录' }}</h2>
        <form @submit.prevent="saveAttendance">
          <div class="form-group">
            <label>员工:</label>
            <select v-model="attendanceForm.employee_id" required>
              <option value="">请选择员工</option>
              <option v-for="employee in employees" :key="employee.id" :value="employee.id">
                {{ employee.name }} ({{ employee.employee_no }})
              </option>
            </select>
          </div>
          <div class="form-group">
            <label>日期:</label>
            <input v-model="attendanceForm.date" type="date" required />
          </div>
          <div class="form-group">
            <label>上班时间:</label>
            <input v-model="attendanceForm.clock_in" type="time" />
          </div>
          <div class="form-group">
            <label>下班时间:</label>
            <input v-model="attendanceForm.clock_out" type="time" />
          </div>
          <div class="form-group">
            <label>状态:</label>
            <select v-model="attendanceForm.status">
              <option value="NORMAL">正常</option>
              <option value="LATE">迟到</option>
              <option value="EARLY">早退</option>
              <option value="ABSENT">缺勤</option>
            </select>
          </div>
          <div class="form-actions">
            <button type="submit" class="btn-primary">保存</button>
            <button type="button" @click="showAddAttendanceModal = false">取消</button>
          </div>
        </form>
      </div>
    </div>
    
    <!-- 新增/编辑薪资记录模态框 -->
    <div v-if="showAddPayrollModal" class="modal">
      <div class="modal-content">
        <span class="close" @click="showAddPayrollModal = false">&times;</span>
        <h2>{{ editingPayroll ? '编辑薪资记录' : '新增薪资记录' }}</h2>
        <form @submit.prevent="savePayroll">
          <div class="form-group">
            <label>员工:</label>
            <select v-model="payrollForm.employee_id" required>
              <option value="">请选择员工</option>
              <option v-for="employee in employees" :key="employee.id" :value="employee.id">
                {{ employee.name }} ({{ employee.employee_no }})
              </option>
            </select>
          </div>
          <div class="form-group">
            <label>月份:</label>
            <input v-model="payrollForm.month" type="month" required />
          </div>
          <div class="form-group">
            <label>基本工资:</label>
            <input v-model="payrollForm.base_salary" type="number" step="0.01" required />
          </div>
          <div class="form-group">
            <label>绩效奖金:</label>
            <input v-model="payrollForm.bonus" type="number" step="0.01" />
          </div>
          <div class="form-group">
            <label>扣除项:</label>
            <input v-model="payrollForm.deductions" type="number" step="0.01" />
          </div>
          <div class="form-group">
            <label>状态:</label>
            <select v-model="payrollForm.status">
              <option value="DRAFT">草稿</option>
              <option value="APPROVED">已批准</option>
              <option value="PAID">已发放</option>
            </select>
          </div>
          <div class="form-actions">
            <button type="submit" class="btn-primary">保存</button>
            <button type="button" @click="showAddPayrollModal = false">取消</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, onMounted, computed } from 'vue'
import { useHRStore } from '@/stores/hr'

export default {
  name: 'HR',
  setup() {
    const hrStore = useHRStore()
    
    const activeTab = ref('employees')
    const showAddEmployeeModal = ref(false)
    const showAddAttendanceModal = ref(false)
    const showAddPayrollModal = ref(false)
    const editingEmployee = ref(null)
    const editingAttendance = ref(null)
    const editingPayroll = ref(null)
    
    const employees = ref([])
    const attendanceRecords = ref([])
    const payrollRecords = ref([])
    
    const employeeForm = reactive({
      employee_no: '',
      name: '',
      department: '',
      position: '',
      hire_date: '',
      status: 'ACTIVE'
    })
    
    const attendanceForm = reactive({
      employee_id: '',
      date: '',
      clock_in: '',
      clock_out: '',
      status: 'NORMAL'
    })
    
    const payrollForm = reactive({
      employee_id: '',
      month: '',
      base_salary: 0,
      bonus: 0,
      deductions: 0,
      status: 'DRAFT'
    })
    
    // 计算实发工资
    const netSalary = computed(() => {
      return parseFloat(payrollForm.base_salary || 0) + 
             parseFloat(payrollForm.bonus || 0) - 
             parseFloat(payrollForm.deductions || 0)
    })
    
    // 获取员工列表
    const fetchEmployees = async () => {
      try {
        // 这里应该调用实际的API
        employees.value = [
          {
            id: 1,
            employee_no: 'EMP001',
            name: '张三',
            department: '技术部',
            position: '工程师',
            hire_date: '2020-01-01',
            status: 'ACTIVE'
          }
        ]
      } catch (error) {
        console.error('获取员工列表失败:', error)
      }
    }
    
    // 获取考勤记录
    const fetchAttendanceRecords = async () => {
      try {
        // 这里应该调用实际的API
        attendanceRecords.value = [
          {
            id: 1,
            employee_id: 1,
            employee_no: 'EMP001',
            date: '2023-01-01',
            clock_in: '09:00',
            clock_out: '18:00',
            status: 'NORMAL'
          }
        ]
      } catch (error) {
        console.error('获取考勤记录失败:', error)
      }
    }
    
    // 获取薪资记录
    const fetchPayrollRecords = async () => {
      try {
        // 这里应该调用实际的API
        payrollRecords.value = [
          {
            id: 1,
            employee_id: 1,
            employee_no: 'EMP001',
            month: '2023-01',
            base_salary: 8000,
            bonus: 1000,
            deductions: 500,
            net_salary: 8500,
            status: 'PAID'
          }
        ]
      } catch (error) {
        console.error('获取薪资记录失败:', error)
      }
    }
    
    // 根据员工ID获取员工姓名
    const getEmployeeName = (employeeId) => {
      const employee = employees.value.find(e => e.id === employeeId)
      return employee ? employee.name : ''
    }
    
    // 编辑员工
    const editEmployee = (employee) => {
      editingEmployee.value = employee
      Object.assign(employeeForm, employee)
      showAddEmployeeModal.value = true
    }
    
    // 删除员工
    const deleteEmployee = (id) => {
      if (confirm('确定要删除这个员工吗？')) {
        // 这里应该调用实际的API
        employees.value = employees.value.filter(e => e.id !== id)
      }
    }
    
    // 保存员工
    const saveEmployee = () => {
      if (editingEmployee.value) {
        // 编辑员工
        const index = employees.value.findIndex(e => e.id === editingEmployee.value.id)
        if (index !== -1) {
          employees.value[index] = { ...employeeForm, id: editingEmployee.value.id }
        }
      } else {
        // 新增员工
        const newEmployee = {
          ...employeeForm,
          id: Date.now() // 简单生成ID
        }
        employees.value.push(newEmployee)
      }
      
      // 重置表单和状态
      resetEmployeeForm()
      showAddEmployeeModal.value = false
    }
    
    // 重置员工表单
    const resetEmployeeForm = () => {
      Object.assign(employeeForm, {
        employee_no: '',
        name: '',
        department: '',
        position: '',
        hire_date: '',
        status: 'ACTIVE'
      })
      editingEmployee.value = null
    }
    
    // 编辑考勤记录
    const editAttendance = (record) => {
      editingAttendance.value = record
      Object.assign(attendanceForm, record)
      showAddAttendanceModal.value = true
    }
    
    // 删除考勤记录
    const deleteAttendance = (id) => {
      if (confirm('确定要删除这个考勤记录吗？')) {
        // 这里应该调用实际的API
        attendanceRecords.value = attendanceRecords.value.filter(r => r.id !== id)
      }
    }
    
    // 保存考勤记录
    const saveAttendance = () => {
      if (editingAttendance.value) {
        // 编辑考勤记录
        const index = attendanceRecords.value.findIndex(r => r.id === editingAttendance.value.id)
        if (index !== -1) {
          attendanceRecords.value[index] = { ...attendanceForm, id: editingAttendance.value.id }
        }
      } else {
        // 新增考勤记录
        const newRecord = {
          ...attendanceForm,
          id: Date.now(), // 简单生成ID
          employee_no: employees.value.find(e => e.id == attendanceForm.employee_id)?.employee_no || ''
        }
        attendanceRecords.value.push(newRecord)
      }
      
      // 重置表单和状态
      resetAttendanceForm()
      showAddAttendanceModal.value = false
    }
    
    // 重置考勤表单
    const resetAttendanceForm = () => {
      Object.assign(attendanceForm, {
        employee_id: '',
        date: '',
        clock_in: '',
        clock_out: '',
        status: 'NORMAL'
      })
      editingAttendance.value = null
    }
    
    // 编辑薪资记录
    const editPayroll = (record) => {
      editingPayroll.value = record
      Object.assign(payrollForm, record)
      showAddPayrollModal.value = true
    }
    
    // 删除薪资记录
    const deletePayroll = (id) => {
      if (confirm('确定要删除这个薪资记录吗？')) {
        // 这里应该调用实际的API
        payrollRecords.value = payrollRecords.value.filter(r => r.id !== id)
      }
    }
    
    // 保存薪资记录
    const savePayroll = () => {
      if (editingPayroll.value) {
        // 编辑薪资记录
        const index = payrollRecords.value.findIndex(r => r.id === editingPayroll.value.id)
        if (index !== -1) {
          payrollRecords.value[index] = { 
            ...payrollForm, 
            id: editingPayroll.value.id,
            net_salary: netSalary.value
          }
        }
      } else {
        // 新增薪资记录
        const newRecord = {
          ...payrollForm,
          id: Date.now(), // 简单生成ID
          employee_no: employees.value.find(e => e.id == payrollForm.employee_id)?.employee_no || '',
          net_salary: netSalary.value
        }
        payrollRecords.value.push(newRecord)
      }
      
      // 重置表单和状态
      resetPayrollForm()
      showAddPayrollModal.value = false
    }
    
    // 重置薪资表单
    const resetPayrollForm = () => {
      Object.assign(payrollForm, {
        employee_id: '',
        month: '',
        base_salary: 0,
        bonus: 0,
        deductions: 0,
        status: 'DRAFT'
      })
      editingPayroll.value = null
    }
    
    // 组件挂载时获取数据
    onMounted(() => {
      fetchEmployees()
      fetchAttendanceRecords()
      fetchPayrollRecords()
    })
    
    return {
      activeTab,
      showAddEmployeeModal,
      showAddAttendanceModal,
      showAddPayrollModal,
      editingEmployee,
      editingAttendance,
      editingPayroll,
      employees,
      attendanceRecords,
      payrollRecords,
      employeeForm,
      attendanceForm,
      payrollForm,
      netSalary,
      fetchEmployees,
      fetchAttendanceRecords,
      fetchPayrollRecords,
      getEmployeeName,
      editEmployee,
      deleteEmployee,
      saveEmployee,
      editAttendance,
      deleteAttendance,
      saveAttendance,
      editPayroll,
      deletePayroll,
      savePayroll
    }
  }
}
</script>

<style scoped>
.hr-container {
  padding: 20px;
}

.tabs {
  display: flex;
  margin-bottom: 20px;
  border-bottom: 1px solid #ddd;
}

.tabs button {
  padding: 10px 20px;
  background: none;
  border: none;
  cursor: pointer;
  border-bottom: 3px solid transparent;
}

.tabs button.active {
  border-bottom-color: #007bff;
  font-weight: bold;
}

.tab-content {
  padding: 20px 0;
}

.toolbar {
  margin-bottom: 20px;
}

.btn-primary {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.btn-primary:hover {
  background-color: #0056b3;
}

.btn-edit, .btn-delete {
  padding: 4px 8px;
  margin-right: 5px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.btn-edit {
  background-color: #ffc107;
  color: #212529;
}

.btn-delete {
  background-color: #dc3545;
  color: white;
}

.table-container {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

th {
  background-color: #f8f9fa;
  font-weight: bold;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

.form-actions {
  display: flex;
  gap: 10px;
}

.modal {
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  background-color: #fefefe;
  margin: 5% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 500px;
  position: relative;
}

.close {
  position: absolute;
  right: 15px;
  top: 15px;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}
</style>